<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>1.双大括号输出文本内容</h3>
        <p>{{msg}}</p>
        <p>{{score + 1}}</p>
        <h3>2.一次性插值</h3>
        <p v-once>{{msg}}</p>
        <h3>3.输出真正的html内容 v-html</h3>
        <p>双大括号:{{contentHtml}}</p>
        <!-- 
            v-html会解析html标签，v-text(双大括号)会当成文本处理
            vue对v-html进行安全处理，防止了xss注入攻击
            对于标签内的script代码不会进行
         -->
        <p>v-html: <span v-html="contentHtml"></span> </p>
         <h3>4.元素绑定指令 v-bind</h3>
         <img v-bind:src="imgUrl">
         <!-- 绑定的简写方式 -->
         <img :src="imgUrl"> <br>
         <a :href="blogUrl">myblog</a>
         <h3>5.事件绑定指令</h3>
         <input type="text" value="1" v-model="num">
         <button @click="add">加1</button>
         <button @click="sub">减1</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"ardai",
                score:100,
                contentHtml:"<span style='color:red'>此内容为红色</span>",
                imgUrl:"https://cn.vuejs.org/images/logo.png",
                blogUrl:"http://39.108.152.192/blog/list",
                num:1,
            },
            //事件函数
            methods: {
                add:function(){
                    console.log("add方法被调用");
                    this.num++;
                },
                sub(){
                    console.log("sub方法被调用");
                    this.num--;
                }
            },
        })
    </script>
</body>
</html>